<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天天生鲜-主页</title>
		<!-- 定义搜索关键词 -->
		<meta name="keywords" content="生鲜,天天,极速">
		<link rel="shortcut icon" href="images/logo.png">
		<!-- 引入外部样式 -->
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="css/footer.css">
	</head>
	<body>
	<div id="app">
		<!-- 头部 -->
		<div class="header_con">
			<div class="header">
				<div class="welcom fl">欢迎来到天天生鲜</div>
				<div class="fr">
					<div class="login_info fl">
						欢迎: <em>yc</em>
					</div>
					<div class="login_btn fl">
						<a href="login.html">登录</a>
						<span>|</span>
						<a href="register.html">注册</a>
					</div>
					<div class="user_link fl">
						<span>|</span>
						<a href="#">用户中心</a>
						<span>|</span>
						<a href="#">我的购物车</a>
						<span>|</span>
						<a href="#">我的订单</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 搜索框 -->
		<div class="search_bar clearfix">
			<a href="index.html" class="logo fl">
				<img src="images/logo.png" alt="">
			</a>
			<div class="search_con fl">
				<form action="">
					<input type="text" placeholder="搜索商品" class="input_text fl" name="key_words">
					<input type="button" value="搜索" class="input_btn fr" >
				</form>
			</div>
			<div class="guest_cart fr">
				<a href="#" class="cart_name fl">我的购物车</a>
				<div class="goods_count fl" id="show_count">1</div>
			</div>
		</div>
		<!-- 商品分类 -->
		<div class="navbar_con">
			<div class="navbar">
				<h1 class="fl">全部商品分类</h1>
				<ul class="navlist fl">
					<li><a href="index.html">首页</a></li>
					<li class="interval">|</li>
					<li><a href="#">手机生鲜</a></li>
					<li class="interval">|</li>
					<li><a href="#">抽奖</a></li>
				</ul>
			</div>
		</div>
		<!-- 导航 轮播图 -->
		<div class="center_con clearfix">
			<div class="subnav fl">
				<ul>
					<li><a href="#mode101" class="fruit">新鲜水果</a></li>
					<li><a href="#mode102" class="seafood">海鲜水产</a></li>
					<li><a href="#mode103" class="meet">猪牛羊肉</a></li>
					<li><a href="#mode104" class="egg">禽类蛋品</a></li>
					<li><a href="#mode105" class="vegetables">新鲜蔬菜</a></li>
					<li><a href="#mode106" class="ice">速冻食品</a></li>
				</ul>
			</div>
			<div class="slide fl">
				<ul class="slide_pics">
					<li><a href=""><img src="images/slide.jpg" alt=""></a></li>
					<li><a href=""><img src="images/slide02.jpg"></a></li>
					<li><a href=""><img src="images/slide03.jpg"></a></li>
					<li><a href=""><img src="images/slide04.jpg"></a></li>
				</ul>
				<div class="prev"></div>
				<div class="next"></div>
				<ul class="points">
					
				</ul>
			</div>
			<div class="adv fl">
				<a href=""><img src="images/adv01.jpg" alt="清凉一夏"></a>
				<a href=""><img src="images/adv02.jpg" alt="盛夏尝鲜"></a>
			</div>
		</div>
		<!-- 商品展示区域 -->
		<div class="list_model " v-for="type in types">
			<div class="list_title clearfix" >
				<h3 class="fl" id="model01">{{type.tname}}</h3>
				<div class="subtitle fl">
					<span>|</span>
					<a :href="'detail.html?' + goods.gno+ '&' +type.tname" v-for="good in goods" v-if="good.tno == type.tno" target="_blank">{{good.gname}}</a>
				</div>
				<a :href="'goods.html?' + type.tno + '&' + type.tname" class="goods_more fr" id="fruit_more" target="_blank">查看更多&gt;</a>
			</div>
			<div class="goods_con clearfix">
				<div class="goods_banner fl"><img :src="'../' + type.pic"></div>
				<ul class="goods_list fl">
					<li v-for="good in goods" v-if="good.tno == type.tno">
						<h4><a :href="'detail.html?' + good.gno + '&' + type.tname" target="_blank">{{good.gname}}</a></h4>
						<a :href="'detail.html?' + good.gno+ '&' + type.tname" target="_blank"><img :src="'../' + good.pic" :title="goods.gname"></a>
						<div class="price">&yen;<span>{{good.price}}</span></div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 尾部版权 -->
		<div class="footer">
			<div class="foot_link">
				<a href="#">关于我们</a><span> | </span>
				<a href="#">联系我们</a><span> | </span>
				<a href="#">招聘广告</a><span> | </span>
				<a href="#">友情链接</a>
			</div>
			<p>Copyright &copy; 2021 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
			<p>电话：0734-8355998 湘ICP备16015987号</p>
		</div>
	</body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/jquery-ui.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/slide.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/checklogin.js"></script>
<script type="text/javascript">
let app = new Vue({
	el: "#app",
	data: {
		onlogin: false,
		outlogin: true,
		loginName: "匿名",
		goods: [],
		types: [],
		goodsCount: 0,
		carts: []
	},
	mounted: function(){
		axios.get("goods/finds").then(rt => {
			if(rt.status == 200 || rt.data.code == 200){
				this.goods = rt.data.data.goods;
				this.types = rt.data.data.types;
			}
		})
	}
})
</script>
</html>
